<template>
  <div class="otherHome">
    <Other-Header bgColor="#5741d9"></Other-Header>
    <div class="searchResultsBox">
      <!-- 面包屑crumbs-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">{{$t('l.home')}}</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/' }">{{$t('l.other_a_34')}}</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 标题 -->
      <div class="searchResults">
        <div class="termsInfo">
          <div class="termsInfoSearch">
            <el-input
              :placeholder="$t('l.other_a_63')"
              v-model="inputSearch"
              size="small"
              style="width: 240px;"
            ><i slot="suffix" class="el-input__icon el-icon-search" @click="onSearch"></i></el-input>
          </div>
          <div class="advertBox">
            <i></i>
            <h3 class="advertTitle">{{$t('l.other_a_34')}}</h3>
          </div>
        </div>
        <!-- 内容 -->
        <div class="searchResultsCon">
          <div class="result">
            <span v-if="count>0">{{$t('l.other_a_36', [keyWords, count])}}</span>
            <span v-else>“{{keyWords}}”{{$t('l.other_a_35')}}</span>
          </div>
          <ul class="resultList">
            <li v-for="(item,index) in items" :key="index">
              <h6 class="resultInfoTitle" @click="link2Detail(item.id)">{{item.title}}</h6>
              <div class="resultInfoCurs">
                {{item.navigation}}
                <span class="block">{{item.InfoName}}</span>
                <span class="block">-</span>
                <span>{{item.date}}</span>
              </div>
              <p class="resultInfoDetails">{{item.details}}</p>
            </li>
          </ul>
          <div class="transPages">
            <el-pagination
              v-show="hasPagination"
              background
              layout="prev, pager, next"
              :page-count="pageCount"
              @current-change="onCurrentChange"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<style lang="less" scoped>
.otherHome {
  background-color: #f7f8fc;
  position: absolute;
  min-height: 100%;
  width: 100%;
  padding-top: 100px;
}
.searchResultsBox {
  width: 1200px;
  box-sizing: border-box;
  overflow: auto;
  margin: 0 auto;
  padding-bottom: 160px;

  /* 面包屑 */
  /deep/.el-breadcrumb__inner a,
  /deep/.el-breadcrumb__inner.is-link {
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    font-familyA: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(51, 56, 94, 0.5);
  }
  /deep/span.el-breadcrumb__item:last-child span {
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    font-familyA: PingFangSC-Regular;
    font-weight: 400;
    color: #2D8DFE;
  }
  /* 内容 */
  .searchResults {
    width: 1200px;
    min-height: 790px;
    background: #fff;
    padding: 36px 40px 20px;
    box-sizing: border-box;
    .advertBox {
      position: relative;
      overflow: hidden;
      .advertTitle {
        display: inline-block;
        font-size: 24px;
        font-familyA: PingFangSC-Semibold;
        font-weight: 600;
        color: rgba(51, 56, 94, 1);
        line-height: 33px;
        margin-left: 20px;
        vertical-align: top;
      }
      i {
        position: absolute;
        width: 3px;
        height: 16px;
        background: #2D8DFE;
        border-radius: 2px;
        color: #33385e;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
      }
    }
    .termsInfoSearch {
      float: right;
    }
    .searchResultsCon {
      padding-left: 20px;
      .result {
        margin-top: 20px;
        border-bottom: 1px solid #f0f2fd;
        padding-bottom: 18px;
        font-size: 16px;
        font-familyA: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(51, 56, 94, 1);
        line-height: 22px;
      }
      .resultList {
        li {
          // margin-bottom: 40px;
          padding: 20px 0;
          border-bottom: 1px solid #f0f2fd;
          .resultInfoTitle {
            font-size: 16px;
            font-familyA: PingFangSC-Medium;
            font-weight: 500;
            color: rgba(51, 56, 94, 1);
            line-height: 22px;
            cursor: pointer;
          }
          .resultInfoCurs {
            font-size: 14px;
            font-familyA: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(51, 56, 94, 0.5);
            line-height: 20px;
            margin: 15px 0 4px 0;
            span.block {
              display: inline-block;
              margin-left: 25px;
            }
          }
          .resultInfoDetails {
            font-size: 14px;
            font-familyA: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(51, 56, 94, 1);
            line-height: 26px;
          }
        }
      }
    }
  }
  .transPages {
    margin-top: 40px;
    margin-bottom: 30px;
    width: 100%;
    text-align: center;
  }
}
</style>

<script>
import { api } from "@/api/api";
import OtherHeader from "@/components/otherHeader";
import Footer from "@/components/footer";

function timeago(dateTimeStamp, timeLang) {
  var minute = 1000 * 60; 
  var hour = minute * 60;
  var day = hour * 24;
  var week = day * 7;
  var halfamonth = day * 15;
  var month = day * 30;
  var now = new Date().getTime(); 
  var diffValue = now - dateTimeStamp; //时间差
  var result;

  if (diffValue < 0) {
    return;
  }
  var minC = diffValue / minute; //计算时间差的分，时，天，周，月
  var hourC = diffValue / hour;
  var dayC = diffValue / day;
  var weekC = diffValue / week;
  var monthC = diffValue / month;
  if (monthC >= 1 && monthC <= 3) {
    result = " " + parseInt(monthC) + timeLang.MATHAGO;
  } else if (weekC >= 1 && weekC <= 3) {
    result = " " + parseInt(weekC) + timeLang.WEEKAGO;
  } else if (dayC >= 1 && dayC <= 6) {
    result = " " + parseInt(dayC) + timeLang.DAYAGO;
  } else if (hourC >= 1 && hourC <= 23) {
    result = " " + parseInt(hourC) + timeLang.HOURAGO;
  } else if (minC >= 1 && minC <= 59) {
    result = " " + parseInt(minC) + timeLang.MINUTEAGO;
  } else if (diffValue >= 0 && diffValue <= minute) {
    result = timeLang.SECONDSAGO;
  } else {
    var datetime = new Date();
    datetime.setTime(dateTimeStamp);
    var Nyear = datetime.getFullYear();
    var Nmonth =
      datetime.getMonth() + 1 < 10
        ? "0" + (datetime.getMonth() + 1)
        : datetime.getMonth() + 1;
    var Ndate =
      datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
    var Nhour =
      datetime.getHours() < 10
        ? "0" + datetime.getHours()
        : datetime.getHours();
    var Nminute =
      datetime.getMinutes() < 10
        ? "0" + datetime.getMinutes()
        : datetime.getMinutes();
    var Nsecond =
      datetime.getSeconds() < 10
        ? "0" + datetime.getSeconds()
        : datetime.getSeconds();
    result = Nyear + "-" + Nmonth + "-" + Ndate;
  }
  return result;
}

export default {
  components: {
    OtherHeader,
    Footer
  },
  data() {
    const timeLang = {
      MATHAGO: this.$t('l.other_a_83'),
      WEEKAGO: this.$t('l.other_a_84'),
      DAYAGO: this.$t('l.other_a_85'),
      HOURAGO: this.$t('l.other_a_86'),
      MINUTEAGO: this.$t('l.other_a_87'),
      SECONDSAGO: this.$t('l.other_a_88')
    }
    return {
      inputSearch: "",
      typeCode: "",
      // keyWords: "",
      typeName: "",
      items: [],
      count: 0,
      hasPagination: false,
      pageNum: 1,
      pageCount: 0,// 总页数
      timeLang: timeLang
    };
  },
  created() {
    let { type:typeCode } = this.$route.query;

    this.type = typeCode;
    this.typeCode = typeCode == 0 ? "announcementCenter" : "helpCenter";
    this.getArticleType(this.typeCode);
    this.search();
  },
  computed: {
    keyWords() {
      return this.$route.query.key;
    }
  },
  methods: {
    onCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.search();
    },
    link2Detail(articleId) {
      this.$router.push({
        path: "/articleDetails",
        query: {
          articleId
        }
      });
    },
    onSearch() {
      this.$router.push({
        path: "/searchResult",
        query: {
          key: this.inputSearch,
          type: this.type
        }
      });
      this.search();
    },
    async getArticleType(typeCode) {
      let res = await api.articleType({
        lang: "zh_CN",
        typeCode: typeCode
      });
      let { code, data, msg } = res.data;

      if (code == 0) {
        this.typeName = data.typeName;
      }
    },
    async search() {
      let params = {
        keyWords: this.keyWords,
        lang: "zh_CN",
        pageNum: this.pageNum,
        pageSize: 5,
        typeCode: this.typeCode
      };
      let res = await api.announcementSearch(params);
      let { code, data, msg } = res.data;

      if (code == 0) {
        let { records, total, pages } = data;
        this.items = records.map(item => ({
          id: item.id,
          title: item.title,
          navigation: `${this.typeName} > ${item.categoryName}`,
          InfoName: item.author,
          date: timeago(new Date(item.updateTime||item.createTime).getTime(), this.timeLang),
          details: item.introduction
        }));
        this.count = total;
        this.pageCount = pages;
        this.hasPagination = this.pageCount > 1;
      } else {
        this.pageCount = 0;
        this.hasPagination = false;
        this.$layer.msg(msg);
      }
    }
  }
};
</script>